<template>
      <div class="login_page">
          <transition name="form-fade" mode="in-out">
            <div class="main">
              <logo>
              </logo>
              <div class="form_contianer" v-show="showLogin">
                  
                  <div class='login_form'>
                    <div class="manage_tip">
                      <p class="title">登录</p>
                      <p class="detail">我们提供一站式赠品采购、发货服务</p>
                    </div>
                    <el-form :model="loginForm" :rules="rules" ref="loginForm" size="small">
                      <el-form-item prop="username" class="form_input">
                          <el-input v-model="loginForm.username" placeholder="用户名"><span></span></el-input>
                      </el-form-item>
                      <el-form-item prop="password" class="form_input">
                          <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
                      </el-form-item>
                      <el-form-item class="form_button">
                          <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登录</el-button>
                      </el-form-item>
                    </el-form>
                    <el-button type="primary" plain @click="toRegister()">没有账号？点击注册</el-button>
                  </div>
                  <img src="../../assets/icon/cover.png" class="cover">
              </div>
            </div>
          </transition>
      </div>
</template>

<script>
    import {getToken, login} from '@/api/login'
    import {mapActions, mapState} from 'vuex'
    import CryptoJS from 'crypto-js'
    import logo from '@/components/Logo'

    export default {
      components: {
        logo
      },
      data () {
        return {
          loginForm: {
            username: '',
            password: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]
          },
          showLogin: false,
        }
      },
      mounted () {
        this.showLogin = true
      },
      computed: {
      },

      methods: {
        ...mapActions(['login']),
        async submitForm (formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              try {
                await this.login(this.loginForm)
                this.$router.push('/giftList')
              } catch (error) {
                this.$notify.error({
                  title: '错误',
                  message: error.message,
                  offset: 100
                })
              }
            } else {
              this.$notify.error({
                title: '错误',
                message: '请输入正确的用户名密码',
                offset: 100
              })
              return false
            }
          })
        },
        toRegister () {
          this.$router.push('register')
        }
      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';

    .form_input /deep/ input {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #e2e2e2;
        font-size: 12px;
        padding: 0;
        color: #222;
        // background-color: white !important;
    }

    .login_page{
        background-color: #324057;
    }
    .manage_tip{  
        .title {
          color: #222;
          font-size: 14px;
          margin-bottom: 10px;
        }
        
        .detail {
          color: #555;
          font-size: 12px;
        }

        margin-bottom: 11px;
    }

    .main {
      .wh(700px, 427px);
      .ctp(700px, 500px);
    }
    

    .form_contianer{
        background-color: #fff;

        display: flex;

        box-shadow: -10px 10px 30px 10px rgba(244, 69, 12, .1);
    }

    .login_form {
      width: 300px;
      padding: 40px 40px;
      display: flex;
      flex-direction: column;
      font-size: 12px;
    }

    // .cover {
      // .wh(400px, 380px);
    // }

    .form_input {
      margin-bottom: 12px;
    }

    .form_button {
      margin-top: 40px;
    }

    .submit_btn {
      width: 100%;
    }
    .tip{
        font-size: 12px;
        color: red;
    }
    .form-fade-enter-active, .form-fade-leave-active {
          transition: all 1s;
    }
    .form-fade-enter, .form-fade-leave-active {
          transform: translate3d(0, -50px, 0);
          opacity: 0;
    }
</style>
